<template>
  <div class="lab">
    <van-icon name="arrow-left" @click="$router.back()" />
    <h4>{{ fxlist.title }}</h4>
    <div class="tp">
      <img :src="`http://localhost:1337${fxlist.author.avatar}`" alt="" /><i>{{
        fxlist.author.nickname
      }}</i>
      <span>{{ fxlist.created_at | newvalue }}</span>
    </div>
    <div class="bto" v-for="(item, index) in fxlist" :key="index"></div>
    <div v-html="fxlist.content" class="ht"></div>
    <!-- 评论 -->
    <div class="Aston">
      <div class="top"><span>评论</span><span>88</span></div>
      <div class="bot">
        <img src="@/assets/avatar09_4b071982f9.jpeg" alt="" />
        <span>永远11</span>
        <i>7天前</i>
        <span class="sp">0<van-icon name="good-job-o" /></span>
        <ul class="lis">
          <li>123</li>
        </ul>
      </div>
    </div>
    <!-- 弹出层 -->
    <div class="tc">
      <input type="text" name="" id="" width="100%" @click="show = true" />
      <van-icon name="star-o" />

      <van-icon name="good-job-o" />

      <van-icon name="good-job-o" />
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
        @click="show = true"
      />
    </van-popup>
  </div>
</template>-

<script>
import moment from "moment";
import { getshareID } from "../../api/find";
export default {
  data() {
    return {
      id: this.$route.query.id,
      show: false,
      fxlist: [],
    };
  },
  async created() {
    const res = await getshareID(this.id);
    console.log(res);
    //绑定数据
    this.fxlist = res.data.data;
  },
  filters: {
    newvalue(value) {
      return moment(value).format("YYYY-MM-DD");
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.lab {
  i.van-icon.van-icon-arrow-left {
    padding: 10px 0;
  }
  h4 {
    font-size: 18px;
    font-weight: 10px;
  }
  .tp {
    img {
      vertical-align: middle;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    span {
      padding: 0 10px;
      font-size: 16px;
      font-weight: 400;
    }
    i {
      margin: 0 10px;
      font-style: normal;
      font-size: 14px;
      font-weight: 700;
    }
    margin-left: 20px;
    padding: 10px 0;
  }
  .bto {
    p {
      font-size: 14px;
    }
    span {
      font-size: 16px;
      padding: 0 10px;
    }
  }
  .ht {
    margin: 10px 0;
    font-size: 16px;
  }
  .top {
    padding: 10px;
  }
  .bot {
    .sp {
      float: right;
      padding-right: 30px;
      i.van-icon.van-icon-good-job-o {
        padding: 0 20px;
      }
    }

    ul li {
      margin: 10px 0;
      margin-left: 25px;
    }
    img {
      vertical-align: middle;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    span {
      font-size: 16px;
      padding: 0 10px;
    }
    i {
      font-style: normal;
      font-size: 14px;
    }
  }
  i.van-icon.van-icon-arrow.van-cell__right-icon {
    display: none;
  }
  .tc {
    b {
      display: block;
    }
    input[type="text"] {
      width: 200px;
      height: 35px;
      border: 1px solid #ccc;
    }
  }
}
</style>